<template>
    <div class="map-container" ref="map"></div>
  </template>
  <script>
  import 'ol/ol.css'
  import { Map, View } from 'ol'
  import TileLayer from 'ol/layer/Tile'
  import XYZ from 'ol/source/XYZ'
  
  export default {
    data () {
      return {
        map: null
      }
    },
    mounted () {
      this.initMap()
    },
    methods: {
      initMap () {
        this.map = new Map({
          target: this.$refs.map,
         layers: [
            new TileLayer({
              title: '网格',
              source: new XYZ({
                visible: true,
                wrapX: true,
                url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=cc4cd5c306fa05a68c0d7f64f98e32d8&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}'
  
              })
            }),
          ],
          view: new View({
            projection: 'EPSG:4326', // 使用这个坐标系
            center: [113.570594, 34.829485], // 郑州
            zoom: 12
          })
        })
      }
  
    }
  }
  </script>
  <style lang="scss" scoped>
    .map-container{
      width: 100%;
      height: 100%;
    }
  </style>
  